<script lang="ts" setup>
import { ref } from "vue";
import { Menu, Setting, Tools, Bell, User, Expand, Fold ,FullScreen, Open,TurnOff} from '@element-plus/icons-vue'
import router from "@/router"

// const  isCollapse = inject('key')
const isCollapse = ref(false)
const user = ref({})
const logout = () => {
  localStorage.clear()
  router.push('/login')
}

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside>
        <div>
          <el-scrollbar>
            <el-menu router unique-opened :collapse="isCollapse">
              <a href="/" class="logo">
                <img src="@/assets/imgs/1.png">
                <h1>智能教育</h1>
              </a>
              <el-sub-menu index="q1">
                <template #title>
                  <el-icon>
                    <Menu />
                  </el-icon><span>课程</span>

                </template>
                <el-menu-item index="11">
                  <el-icon>
                    <Setting />
                  </el-icon><span>课程查询</span>
                </el-menu-item>
                <el-menu-item index="22">
                  <el-icon>
                    <User />
                  </el-icon><span>课程管理</span>
                </el-menu-item>


              </el-sub-menu>
              <el-sub-menu>
                <template #title>
                  <el-icon>
                    <Menu />
                  </el-icon><span>成绩</span>
                </template>
                <el-menu-item index="2">
                  <el-icon>
                    <Setting />
                  </el-icon><span>成绩查询</span>
                </el-menu-item>
                <el-menu-item index="3">
                  <el-icon>
                    <User />
                  </el-icon><span>成绩分析</span>
                </el-menu-item>
              </el-sub-menu>



              <el-menu-item index="4">
                <el-icon>
                  <Tools />
                </el-icon><span>学习工具</span>
              </el-menu-item>
              <el-menu-item index="5">
                <el-icon>
                  <Tools />
                </el-icon><span>笔记本</span>
              </el-menu-item>


            </el-menu>
          </el-scrollbar>
        </div>

      </el-aside>

      <el-container class="common-layout-main">
        <el-header>
          <el-row :gutter="20" style="margin-top: 15px;">
            <el-col :span="1">
              <el-icon @click="isCollapse = !isCollapse" style="font-size: 24px;">
                <Expand v-show="isCollapse" />
                <Fold v-show="!isCollapse" />
              </el-icon>
            </el-col>

            <el-col :span="15">
              <el-breadcrumb separator="/" style="margin-top: 5px;">
                <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" :to="{ path: item.path }">{{
                  item.meta.title }}</el-breadcrumb-item>

              </el-breadcrumb>
            </el-col>
            <el-col :span="4" class="custom-welcome">
              欢迎xxxx回来！
            </el-col>

            <el-col :span="1">

              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-avatar  :size="25" src="/imgs/1.png"></el-avatar>
                  
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item  @click="logout()" divided>退出登录</el-dropdown-item>
                    <el-dropdown-item divided>Action 3</el-dropdown-item>
                   
                  </el-dropdown-menu>
                </template>
              </el-dropdown>



            </el-col>


            <el-col :span="1">

              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-icon size="25px" color="#666">
                    <Bell />
                  </el-icon>
                  
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    
                    <el-dropdown-item>消息中心</el-dropdown-item>
                    <el-dropdown-item divided>意见反馈</el-dropdown-item>
                    <el-dropdown-item divided>Action 3</el-dropdown-item>
                   
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

             
            </el-col>

            <el-col :span="1">
              <el-icon :size="25" v-show="true"><TurnOff /></el-icon>
              <el-icon :size="25" v-show="false"><Open /></el-icon>
            </el-col>
            
            <el-col :span="1">
              <el-icon :size="25"><FullScreen /></el-icon>
            </el-col>

          </el-row>

        </el-header>
        <el-main>
          <div style="width: 1000px;margin: 0 auto;">
            <router-view></router-view>

          </div>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>



<style lang="scss" scoped>
.common-layout-main {
  background: linear-gradient(135deg, #FFFEFF 0%, #D7FFFE 100%);

}



.el-aside {
  background-color: white;
  height: 100vh;
  width: auto;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
  height: 60px;

  img {
    width: 32px;
    height: 32px;
  }
}

.el-menu {
  background-color: white;
  border-right: none;
  width: 200px;

  &.el-menu--collapse {
    width: 60px;

    & h1 {
      display: none;
    }
  }
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

//去掉黑色方框
:deep(.el-tooltip__trigger:focus-visible) {
      outline: unset;
    }

    .custom-welcome {
  /* 添加你的样式 */
  font-size: 18px; /* 示例：改变字体大小 */
  color: #666; /* 示例：改变字体颜色 */
  text-align: center; /* 示例：居中对齐 */
}
</style>
